<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <title>Document</title>
</head>

<body>
    <!-- 顶部 -->
    <header class="app">


        <img src="images/close.png" alt="" class="img1">

        <img src="images/logo.png" alt="" class="img2">

        <span class="open">打开京东App，购物更轻松</span>
        <span class="opennow">立即打开</span>

    </header>
    <!-- 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
    <!-- 主体内容部分 -->
    <div class="main-content">
        <div class="slider">
            <img src="upload/c5fcd792372257fa.jpg!q70.jpg" alt="" class="bgpic">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./upload/de7b25b2b06eaa33.jpg!cr_1053x420_4_0!q70.jpg" alt="" class="listpic"></div>
                    <div class="swiper-slide"><img src="./upload/f5b4b6ac6880ce17.jpg!cr_1053x420_4_0!q70.jpg" alt="" class="listpic"></div>
                    <div class="swiper-slide"><img src="./upload/7ecf16526b3ddc0c.jpg!cr_1125x449_0_166!q70.jpg" alt="" class="listpic"></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- <ul class="list">
                <li><img src="./upload/de7b25b2b06eaa33.jpg!cr_1053x420_4_0!q70.jpg" alt="" class="listpic on"></li>
                <li><img src="./upload/f5b4b6ac6880ce17.jpg!cr_1053x420_4_0!q70.jpg" alt="" class="listpic"></li>
                <li><img src="./upload/7ecf16526b3ddc0c.jpg!cr_1125x449_0_166!q70.jpg" alt="" class="listpic"></li>
            </ul> -->
        </div>
        <!-- <script>
            let listpics = document.querySelectorAll('.listpic')
            let timerID = null
            let index = 0
            timerID = setInterval(function() {
                listpics[index].classList.remove('on')
                index++
                if (index === 3) {
                    index = 0
                }
                listpics[index].classList.add('on')
            }, 1000)
        </script> -->
        <!-- 广告 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic22.dpg" alt="">
                </a>

            </div>
            <div>
                <a href="#">
                    <img src="upload/pic33.dpg" alt="">
                </a>

            </div>
        </div>
        <!-- nav部分 -->
        <nav class="clearfix">
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

        </nav>
        <!-- 新闻 -->
        <div class="news">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">

            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">

            </a>
        </div>
        <!-- 分类 -->
        <div class="floor_item">

            <div>
                <p>正品直邮</p>
                <img src="./upload/1.jpg" alt="">
            </div>
            <div>
                <h3>来电好货</h3>
                <p>3C大放价</p>
                <img src="./upload/2.jpg" alt="">
            </div>
            <div>
                <h3>国潮风尚</h3>
                <p>国货正当时</p>
                <img src="./upload/3.jpg" alt="">
            </div>
            <div>
                <p>都是你爱的</p>
                <img src="./upload/4.jpg" alt="">
            </div>

        </div>

        <!-- 商品列表 -->
        <div class="commodity">
            <div>
                <img src="./upload/content.jpg" alt="">
                <p class="name">南极人莫代尔睡衣女2021年新款春秋款网红简约棉...</p>
                <p class="foot">
                    <span class="price">￥279</span>
                    <span class="style">新品</span>
                    <span class="look">看相似</span>
                </p>
            </div>
            <div>
                <img src="./upload/content1.jpg" alt="">
                <p class="name">博世（Bosch）无线手持吸尘器强大吸力智感应精过滤...</p>
                <p class="foot">
                    <span class="price">￥4099</span>
                    <span class="style">满减</span>
                    <span class="look">看相似</span>
                </p>
            </div>
            <div>
                <img src="./upload/content2.jpg" alt="">
                <p class="name">林家铺子水果罐头&nbsp;&nbsp;&nbsp;什锦罐头200g*2罐</p>
                <p class="foot">
                    <span class="price">￥19.9</span>
                    <!-- <span class="style">满减</span> -->
                    <span class="look">看相似</span>
                </p>
            </div>
            <div>
                <img src="./upload/content3.jpg" alt="">
                <p class="name">洁盟（skymen）超声波清洗机眼睛家用清洁机工业实...</p>
                <p class="foot">
                    <span class="price">￥298</span>
                    <!-- <span class="style">满减</span> -->
                    <span class="look">看相似</span>
                </p>
            </div>
        </div>
    </div>
    <!-- 继续加载 -->
    <div class="goon">
        <p>点击继续加载</p>
    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="footertop">
            <a href="#">登录</a>
            <a href="#">注册</a>
            <a href="#">客户服务</a>
            <a href="javascript:;" class="return">返回顶部</a>
        </div>
        <div class="footermiddle">
            <div><img src="./images/footb1.png" alt=""></div>
            <div><img src="./images/footb2.png" alt=""></div>
            <div><img src="./images/footb3.png" alt=""></div>
        </div>
        <p class="footerlast">
            Copyright @ 2004-2020京东JD.com 版权所有

        </p>
    </div>
    <!-- 底部导航 -->
    <div class="bottomnav">
        <div class="color gray"><img src="./images/bottomnav1.png" alt=""></div>
        <div class="color"><img src="./images/bottomnav2.png" alt=""></div>
        <div class="color"><img src="./images/bottomnav3.png" alt=""></div>
        <div class="color"><img src="./images/bottomnav4.png" alt=""></div>
        <div class="color"><img src="./images/bottomnav5.png" alt=""></div>
    </div>
    <div class="totop"></div>
    <!-- 引入js -->
    <script src="./js/index.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
</body>

</html>